<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=oqiqMtu7EFYgglioNXsadjWhPB2YeqVQ"></script>
    <title></title>
    <style type="text/css">
        body, html{width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}
        #l-map{height:500px;width:100%;}
        #r-result{width:100%;}
    </style>
</head>
<body>
<div id="l-map"></div>
<div id="r-result"></div>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMapGL.Map("l-map");            // 创建Map实例
	
	
	//开启鼠标滚轮缩放
	map.enableScrollWheelZoom(true); 
	var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
	map.addControl(scaleCtrl);
	var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
	map.addControl(zoomCtrl);
	var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
	map.addControl(cityCtrl);
	
	
    map.centerAndZoom(new BMapGL.Point(113.746179,34.848892), 11);
    var local = new BMapGL.LocalSearch(map, {
        renderOptions: {map: map, panel: "r-result"}
    });
    local.search("杨金路菜市场");

	var point = new BMapGL.Point(113.7462921704829,34.848222496801014);
	var point1 = new BMapGL.Point(113.85169292783242,34.85396918371003);
	var point2 = new BMapGL.Point(113.98039298929009,34.83967659982081);
    var point3 = new BMapGL.Point(113.71778586538375,33.85309804307735);
	var marker = new BMapGL.Marker(point);        // 创建标注
	map.addOverlay(marker); // 将标注添加到地图 
	
	var marker1 = new BMapGL.Marker(point1);        // 创建标注   
	map.addOverlay(marker1); // 将标注添加到地图 
	var marker2 = new BMapGL.Marker(point2);        // 创建标注   
	map.addOverlay(marker2);
    var marker3 = new BMapGL.Marker(point3);        // 创建标注
    map.addOverlay(marker3);// 将标注添加到地图


    var opts = {
        width: 250,     // 信息窗口宽度
        height: 100,    // 信息窗口高度
        title: "欢迎来购物"  // 信息窗口标题
    }
    // 创建信息窗口对象
    var content='<ul style="color: #2196F3"><li >第三组</li><li>走进菜先生市场</li><li>李艳春,李宁,宋颜鸽,王晨慧，张明杰</li></ul>';
    var infoWindow = new BMapGL.InfoWindow(content, opts);

    map.openInfoWindow(infoWindow,point);

    // 点击marker标记-- 打开信息窗口
    marker.addEventListener('click',function(){
        map.openInfoWindow(infoWindow, point);
    });


    var map = new BMapGL.Map("allmap");
	            map.enableScrollWheelZoom();
	            map.centerAndZoom(new BMapGL.Point(113.7463, 34.848), 11);
	            var walking = new BMapGL.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
	            walking.search(point, point2);
	
	
</script>
</body>

</html>